<template>
	<view class="page" :style="{minHeight:$height()}">
		<scroll-view scroll-y="true" style="overflow: hidden;" :style="{height:$height(64)}">
			<view style="padding:30rpx;font-size: 24rpx;font-family: PingFang SC;line-height: 48rpx;color: #666666;">
				<u-parse :html="html"></u-parse>
			</view>
		</scroll-view>
		
		<view v-if="!form.labour_sign_image" class="back" @click="doSign()">
			点击签名
		</view>
		<view class="back" v-else @click="$next(`/pages/contract/signSecrecy`)">
			下一步
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				html: "",
				form:{},
			}
		},
		onShow() {
			
		},
		onLoad(option) {
			this.form.tag = option.tag
			this.getSignContent()
			uni.$once('doSign', (val) => {
				if(val){
					this.form.labour_sign_image = val
					this.form.sign = 1
					this.getSignContent()
				}
				
			})
		},
		methods: {
			doSign(){
				this.$next(`/pages/contract/doSign`)
			},
			
			getSignContent() {
				this.$axios.request(this.$api.getSignContractTemplate,"POST",this.form).then((val) => {
					this.html = val.data.content
				})
			}
		}
	}
</script>

<style>
	.page {
		width: 100%;
		overflow: hidden;
		background-color: #F9F9FB;
		padding-bottom: 80rpx;
	}

	.title {
		width: 100%;
		height: 64rpx;
		padding: 0 32rpx;
		background-color: #FFFFFF;
		margin: 16rpx 0;
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		line-height: 64rpx;
		color: #333333;
		opacity: 1;
	}

	.item {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		height: 65rpx;
		padding: 0 32rpx 0;
		background-color: #FFFFFF;
		margin-bottom: 4rpx;
	}

	.left {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 230rpx;
		height: 64rpx;
	}

	.info,
	.xing {
		height: 64rpx;
		line-height: 64rpx;
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		color: #333333;
		opacity: 1;
	}

	.xing {
		color: #FF2D55;
		font-size: 30;
		height: 64rpx;
		line-height: 64rpx;
		margin-left: 10rpx;
	}

	.right {
		height: 64rpx;
		line-height: 64rpx;
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		color: #62656D;
		opacity: 1;
	}

	.select {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		background-color: #FFFFFF;
		width: 100%;
		height: 65rpx;
		padding: 0 32rpx 0;
	}

	.compelet {
		position: absolute;
		left: 32rpx;
		bottom: 120rpx;
		width: 686rpx;
		height: 64rpx;
		background-color: #2E6ADF;
		opacity: 1;
		border-radius: 4rpx;
		font-size: 28rpx;
		font-family: "PingFang SC";
		font-weight: 400;
		line-height: 64rpx;
		margin: 0 auto;
		text-align: center;
		color: #FFFFFF;
		opacity: 1;
	}

	.back {
		position: fixed;
		left: 32rpx;
		bottom: 40rpx;
		width: 686rpx;
		height: 64rpx;
		border: 2rpx solid #2E6ADF;
		opacity: 1;
		border-radius: 4rpx;
		font-size: 28rpx;
		font-family: "PingFang SC";
		font-weight: 400;
		line-height: 64rpx;
		margin: 0 auto;
		text-align: center;
		color: #2E6ADF;
		opacity: 1;
		background-color: #fff;
	}
</style>
